<template>
  <div id="app">
    <header class="app-header">
      <h1>房源管理系统</h1>
      <button @click="showAddForm = true" class="add-btn">添加新房源</button>
    </header>

    <main class="app-main">
      <!-- 房源列表组件 -->
      <HouseList
        v-if="!showAddForm && !showEditForm"
        :houses="houses"
        :loading="loading"
        :error-message="errorMessage"
        @edit-house="handleEdit"
        @delete-house="handleDelete"
      />

      <!-- 房源表单组件 - 添加/编辑共用 -->
      <HouseForm
        v-if="showAddForm || showEditForm"
        :is-editing="showEditForm"
        :initial-data="currentHouse"
        @save-house="handleSaveHouse"
        @cancel-form="handleCancelForm"
      />
    </main>
  </div>
</template>

<script>
import HouseList from '@/features/houses/components/HouseList.vue';
import HouseForm from './features/houses/components/HouseForm.vue';
import { fetchAllHouses, createHouse, updateHouse, deleteHouse } from './features/houses/services/houseService';

export default {
  name: 'App',
  components: {
    HouseList,
    HouseForm
  },
  data() {
    return {
      houses: [],
      loading: false,
      errorMessage: '',
      showAddForm: false,
      showEditForm: false,
      currentHouse: null
    };
  },
  mounted() {
    this.fetchHouses();
  },
  methods: {
    // 获取所有房源
    async fetchHouses() {
      this.loading = true;
      this.errorMessage = '';
      try {
        this.houses = await fetchAllHouses();
      } catch (error) {
        console.error('获取房源详细错误:', error);
        this.errorMessage = `获取房源失败: ${error.message}`;
      } finally {
        this.loading = false;
      }
    },

    // 处理编辑房源
    handleEdit(house) {
      this.currentHouse = { ...house };
      this.showEditForm = true;
    },

    // 处理删除房源
    async handleDelete(id) {
      try {
        await deleteHouse(id);
        // 删除成功后刷新列表
        this.houses = this.houses.filter(house => house.id !== id);
      } catch (error) {
        console.error('删除房源错误:', error);
        this.errorMessage = `删除房源失败: ${error.message}`;
      }
    },

    // 处理保存房源（新增或编辑）
    async handleSaveHouse(houseData) {
      try {
        if (this.showEditForm) {
          // 编辑现有房源
          const updatedHouse = await updateHouse(this.currentHouse.id, houseData);
          this.houses = this.houses.map(h => h.id === updatedHouse.id ? updatedHouse : h);
        } else {
          // 添加新房源
          const newHouse = await createHouse(houseData);
          this.houses.push(newHouse);
        }

        // 保存成功后重置表单状态
        this.handleCancelForm();
      } catch (error) {
        console.error('保存房源错误:', error);
        this.errorMessage = `保存房源失败: ${error.message}`;
      }
    },

    // 取消表单（返回列表）
    handleCancelForm() {
      this.showAddForm = false;
      this.showEditForm = false;
      this.currentHouse = null;
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 30px;
}

.add-btn {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.app-main {
  min-height: 400px;
}
</style>
